<template>
	<div><HEADER></HEADER>
		<div class="container">
			<div class="columns">
				<div class="mine-columns">

					<div class="card">
						<div class="article">
							<div class="coverImg">
								<img :src="coverImg">
							</div>
							<div class="textCont">
								
								<div class="textHead">
									<h1 class="headTit">{{title}}</h1>
									<div class="mark">
										<div class="markL">
											<span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_calen"></use></svg>{{date}}</span> · 
											<span>{{classify}}</span> · 
											<span>{{artNumb}}</span>
										</div>
										<div class="markR">
											<svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_mark"></use></svg>{{tags}}</div>
									</div>									
								</div>
								<div class="textExce" v-if="excerpt">{{excerpt}}</div>
								
								<div class="textBody" v-html="content" v-highlight></div>
								
								<div class="textFoot">
									<p v-if="author">
										<span>作者：</span><span>{{author}}</span>
									</p>
									<p v-if="ArtID">
										<span>文章链接：</span><span>http://192.168.0.23:8080/#{{$route.path}}?ArtID={{ArtID}}</span>
									</p>
									<p v-if="article">
										<span>文章出处：</span><span>{{article}}</span>
									</p>
									<p><span>版权声明：</span>本博客所有文章除特别声明外，均采用<span>CC BY-NC-SA 4.0 </span>协议。转载请注明出处！</p>
								</div>

							</div>
						</div>
					</div>

				</div>
				<LeftView @buttClassfy="buttClassfy" @buttLable="buttLable"></LeftView>
				<RighthView @buttArticle="buttArticle" @buttArchive="buttArchive"></RighthView>
			</div>
		</div>
		<Gotop></Gotop><FOOTER></FOOTER>
	</div>
</template>

<script>
	import {} from '../assets/font/iconfont.js'
	import HEADER from '../components/header.vue'
	import FOOTER from '../components/footer.vue'
	import LeftView from '../components/leftView.vue'
	import RighthView from '../components/righthView.vue'
	import Gotop from '../components/gotop.vue'
	export default {
		name: 'Article',
		data() {
			return {
				ArtID: [],	// 从首页跳转带的参数
				// 数据填充
				article: '',
				author: '',
				classify: '',
				content: '',
				artNumb: '',
				coverImg: '',
				date: '',
				excerpt: '',
				link: '',
				tags: '',
				title: '', 
			}
		},
		mounted() {this.ArtID = this.$route.query.ArtID;this.getArticleID(this.$route.query.ArtID);},
		methods: {
			getArticleID(e){			// 根据参数请求文章	index
				this.$axios.post(this.HOST + '/api/indexArticle',{
					id: e
				}).then(res => {
					this.dataDealWith(res.data.data[0])
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			dataDealWith(e){
				this.article = e.article;
				this.author = e.author;
				this.classify = e.classify;
				this.coverImg = e.cover;
				this.excerpt = e.excerpt;
				this.link = e.link;
				this.tags = e.tags;
				this.title = e.name;
				this.content = this.$marked(e.content);
				let date = e.date;
				let dataarr = date.split('T');
				this.date = dataarr[0];
				let num = this.content.length;
				let nm = num.toString();
				if(nm.length<4){
					this.artNumb = num.toString() + '字';
				}else if(nm.length==4){
					num = num/1000;
					this.artNumb = num.toFixed(2) + '千字';
				}else if(nm.length == 5){
					num = num/10000;
					this.artNumb = num.toFixed(2) + '万字';
				}else if(nm.length == 6){
					num = num/100000;
					this.artNumb = num.toFixed(2) + '十万字';
				}
			},
			// 分类
			buttClassfy(e){
				console.log('buttClassfy',e)
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 标签
			buttLable(e){
				console.log('buttLable',e)
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 归档
			buttArchive(e){
				console.log('buttArchive',e)
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 最近文章
			buttArticle(e){
				this.getArticleID(e.ArtID);
			},
		},
		components: {
			HEADER: HEADER,
			FOOTER: FOOTER,
			LeftView: LeftView,
			RighthView: RighthView,
			Gotop: Gotop
		}, 
	}
</script>

<style>
	@import url("../assets/css/Article.css");
</style>


